<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户信息新增</title>
<!--引入bootstrap样式文件--->
<link rel="stylesheet" type="text/css" href="${basePath}static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${basePath}static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />
<!-- 引入分页插件 -->
<link rel="stylesheet" type="text/css" href="${basePath}static/paginationjs-master-2.1.0/dist/pagination.css" />
<link rel="stylesheet" href="${basePath}static/adminManager/add/css/add.css">	
<style>
	.bootint{width:700px !important;}
	.input-span-text{width:120px !important;margin-left:80px;}
	.form-control3{width:500px !important;}
	.modal{bottom:auto !important}
</style>


</head>
<body>
	<div >
		<form id="modifyPhoneModel" class="form-horizontal"enctype="multipart/form-data">
			
			<!--❀❀❀❀❀❀❀隐藏表单，保存用户id字段❀❀❀❀❀❀❀-->
			<input type="hidden" id="phoneid" name="phoneid" value="${phoneid}">

			<div class="bootint">
				<span class="input-span-text ">手机名称</span>
				<input type="text" class="form-control3" id="phonename"name="phonename" placeholder="请输入手机名称">
			</div>
				
			<div class="bootint">
				<span class="input-span-text ">手机价格</span>
				<input type="text" class="form-control3" id="phoneprice"name="phoneprice" placeholder="请输入手机价格">
			</div>
				
			<div class="bootint">
				<span class="input-span-text ">手机库存</span>
				<input type="text" class="form-control3" id="phoneamount"name="phoneamount" placeholder="请输入手机库存">
			</div>
					
			<div class="bootint">
				<span class="input-span-text ">手机详情</span>
				<input type="text" class="form-control3"  id="phonedescription" name="phonedescription" placeholder="请输入手机详细介绍">
			</div>
				
			<div class="bootint">
				<span class="input-span-text ">购买链接</span>
				<input type="text" class="form-control3" id="phoneurl"name="phoneurl" placeholder="请输入商品的购买链接">
			</div>

			<div class="bootint">
				<!-- 因为springmvc框架中，文件流对象，需要单独进行映射，不能直接映射给实体类；
						所有，文件表单控件name属性按一下规范命名：前缀_实体类属性名；
						例如：file_phoneimg（注意file_在文件上传时是固定的） 
						目的：防止文件流对象内容直接映射给实体类的属性-->
				<span class="input-span-text ">手机图片</span>	
				<input type="file" class="form-control3" id="phoneimg"name="file_phoneimg" > 
			</div>


			<!-- 隐藏按钮控件，用于提交ajax事件 -->
			<input type="hidden" id="hiddenclick2" >

		</form>
	</div>
	
</body>


<!--引入jquery-->
<script type="text/javascript" 	src="${basePath}static/jquery-1.12.4/jquery-1.12.4.min.js"></script>
<!--引入bootstrap脚本--->
<script type="text/javascript" src="${basePath}static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 引入分页插件 -->
<script type="text/javascript" src="${basePath}static/paginationjs-master-2.1.0/dist/pagination.min.js"></script>
<script type="text/javascript" src="${basePath}static/layui-v2.4.5/layui/layui.js"></script>

<script type="text/javascript">
	//修改的ajax处理
	function doRESTFul_put2() {
		console.info("2222222222222222222222");
		// 创建一个dom的formdata对象，并设置该对象的enctype属性为multipart/form-data
		// 将form数据提出来，放入到formdata对象中，使用fromdata对象作为ajax发送的数据对象
		var formData = new FormData($("#modifyPhoneModel")[0]);
		// 设置fromdata对象的enctype属性为multipart/form-data
		formData.enctype = "multipart/form-data";
		console.info(formData);
		/**
		注意：
		使用jquery的ajax想springmvc框架的action发送的ajax请求中如果有流对象，则要求做一下处理：
		（1） 使用dom的fromdata对象打包from表单，并设置fromdata对象的enctype属性为multipart/form-data；
		（2）设置jquery的ajax请求的一下两个属性为false:
			contentType: false,
			processData: false, 
		（3）springmvc框架后台的action响应方法的实体类参数不需要使用@RequestBody进行修饰，springmvc框架
			会自动对含有multipart/form-data请求进行数据类型转换。（自动将form表单数据映射为实体类）
		 **/
		// 使用jquery进行ajax请求处理
		$.ajax({
			type : "POST", // 请求类型
			url : "phoneInfo/" + $("#phoneid").val(), // 请求的url
			//data : $("#form1").serialize(), // 发送的数据 使用serialize方法替代手动拼写数据串
			data : formData,
			//dataType : "json", // 响应发挥的数据类型	
			//contentType:"multipart/form-data", // form表单发送服务器时打包时的类型，包含文件流
			// 两个属性为false
			contentType : false,
			processData : false,
			success : function(data, textStatus, jqXHR) { // 执行成功之后的回调函数
				// 回调函数的dom操作
				// 解析json数据
				//console.info(data);
				// 将ajax查询的结果进行分页处理
				//doPaging(data, 5);
				/*
				 注意，如果返回数据为文本类型，需要将json字符串转为json对象
				each函数解析的是json对象，而不是json字符串
				 */
			},
			error : function(data) {
				layer.alert("mmmmmmp请求失败" + data);
			}
		});
	}

	// document 加载时执行
	$(function() {
		// 给form表单对象添加一个onclick事件，改时间由当前页面的父模态框进行调用
		//$("#hiddenclick2").bind("click", doRESTFul_put2);

		// 使用jquery进行ajax通过id查询出当前需要修改的数据记录结果

		// 加载修改数据	
		var getUri = "phoneInfo/" + $("#phoneid").val();
		console.info("/*/*/*/*/phoneid:"+$("#phoneid").val());
		console.info("/*/*/*/*/*/*/*/getUri:" + getUri);

		$.get("phoneInfo/" + $("#phoneid").val(), function(data) {
			// 回调函数的dom操作
			// 解析json数据
			console.info("解析出的所有的数据结果data："+data);
			// 将ajax查询的结果进行分页处理
			// 因为返回的json数据类型是list转换而来，需要按照list标准进行解析
			if (data != null && data[0]) {
				console.info("-*-*-*-*-*-*-*-*-*-*-*-*-*-*-取出的数据结果data[0]："+data[0]);
				// 取出list中的元素
				var en = data[0];
				// 使用jquery将en中的值赋值给各个控件
				$("#phonename").val(en.phonename);
				$("#phoneprice").val(en.phoneprice);
				$("#phoneamount").val(en.phoneamount);
				$("#phonedescription").val(en.phonedescription);
				$("#phoneurl").val(en.phoneurl);
				$("#phoneimg").val(en.phoneimg);
			}
		});
	});
</script>
</html>